<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./js/extend.js"></script>
	<link rel="stylesheet" href="./css/inc.css" />
	<title>bootstrp 结合</title>
</head>
<body>
	<div class="w1000 auto">
		<div class="Menu">
			<a href="index.html"><i class="icon-home gray mr5"></i>首页</a>
			<a href="layer.html"><i class="icon-th gray mr5"></i>布局</a>
			<a href="table.html"><i class="icon-table gray mr5"></i>表格</a>
			<a href="form.html"><i class="icon-building gray mr5"></i>表单</a>
			<a href="button.html"><i class="icon-coffee gray mr5"></i>色彩</a>
			<a href="ico.html"><i class="icon-leaf gray mr5"></i>图标</a>
			<a href="js.html"><i class="icon-legal gray mr5"></i>js插件</a>
		</div>
	</div>
	<div class="w1000 auto mt10">
		<h2 class="bgmaroon white p10">老地方栅格系统</h2>
		<style type="text/css">
			.row6,.row9,.row12,.row15 {
		  	border-left: #aaa solid 1px;
		  	border-top: #aaa solid 1px;
		  	text-align: center;
		  }
			.row6 [class*='span'],.row9 [class*='span'],.row12 [class*='span'],.row15 [class*='span']{
				border: #aaa solid 1px;
				border-left:0;
				border-top:0;
				margin-top: -1px;
	      margin-right: -1px;
	      /*box-shadow: 0 0 1px #333;*/
			}
		</style>
		<div class="">
			<h3 class="dib bggreen-3 white mt10 mb10 p5">6格</h3>
			<div class="row6">
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
			</div>
			<h3 class="dib bggreen-3 white mt10 mb10 p5">9格</h3>
			<div class="row9">
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
			</div>
			<h3 class="dib bggreen-3 white mt10 mb10 p5">12格</h3>
			<div class="row12">
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
			</div>
			<h3 class="dib bggreen-3 white mt10 mb10 p5">15格</h3>
			<div class="row15">
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
				<div class="span1">span1</div>
			</div>
		</div>
		<h3 class="bgblue white mt20 p10">两端对齐布局应用</h3>
		<div class="rows">
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct15 bdc mt5">pct15</div>
			<div class="span pct25 bdc mt5">pct25</div>
			<div class="span pct5 bdc mt5">pct5</div>
			<div class="span pct20 bdc mt5">pct20</div>
			<div class="span pct10 bdc mt5">pct10</div>
			<div class="span pct15 bdc mt5">pct15</div>
		</div>
	</div>

	<div class="w1000 auto mt10 of">
		<div class="row mt5">
			<div class="span12">
				<h2 class="p10 bgpurple white">引入bootstrap 12宫格 布局概念</h2>
			</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span10 ">span10</div>
			<div class="bd2 bdgray span2 ">span2</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span9 ">span9</div>
			<div class="bd2 bdgray span3 ">span3</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span6 ">span6</div>
			<div class="bd2 bdgray span6 ">span6</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span4 ">span4</div>
			<div class="bd2 bdgray span8 ">span8</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span2 ">span2</div>
			<div class="bd2 bdgray span2 ">span2</div>
			<div class="bd2 bdgray span2 ">span2</div>
			<div class="bd2 bdgray span2 ">span2</div>
			<div class="bd2 bdgray span2 ">span2</div>
			<div class="bd2 bdgray span2 ">span2</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span3 ">span3</div>
			<div class="bd2 bdgray span3 ">span3</div>
			<div class="bd2 bdgray span3 ">span3</div>
			<div class="bd2 bdgray span3 ">span3</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span4 ">span4</div>
			<div class="bd2 bdgray span4 ">span4</div>
			<div class="bd2 bdgray span4 ">span4</div>
		</div>
		<div class="row mt5">
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
			<div class="bd2 bdgray span1 ">span1</div>
		</div>

		<h1 class="bgteal white p10 mt10 mb10 f16">自动两端对齐-默认最后一排也是居中对齐</h1>
		<div class="rows">
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>

			<div class="bdd span span4 mt5">span4</div>
			<div class="bdd span span8 mt5">span8</div>
			<div class="bdd span span4 mt5">span4</div>
			<div class="bdd span span8 mt5">span8</div>

			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>

			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>

		</div>

		<h1 class="bgaqua white p10 mt10 mb10 f16">最后一排靠左对齐，只需要加上同样列数的spanleft</h1>
		<div class="rows">
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>
			<div class="bdd span span3 mt5">span3</div>

			<div class="bdd span span4 mt5">span4</div>
			<div class="bdd span span8 mt5">span8</div>
			<div class="bdd span span4 mt5">span4</div>
			<div class="bdd span span8 mt5">span8</div>

			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>

			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>
			<div class="bdd span span2 mt5">span2</div>



			<div class="span col2 spanleft">&nbsp;</div>
			<div class="span col2 spanleft">&nbsp;</div>
			<div class="span col2 spanleft">&nbsp;</div>
			<div class="span col2 spanleft">&nbsp;</div>
			<div class="span col2 spanleft">&nbsp;</div>
			<div class="span col2 spanleft">&nbsp;</div>
		</div>

		<h1 class="tc">瀑布流</h1>
		<script type="text/javascript">
			Array.prototype.min=function(){
				return Math.min.apply(null,this);
			}
			function addWater(){
				var r=Math.ceil(Math.random()*4),c =[
					'<div class="tc bggreen'+r+' h50 mt10">瀑布流</div>',
					'<div class="tc bggreen'+r+' h100 mt10">瀑布流</div>',
					'<div class="tc bggreen'+r+' h200 mt10">瀑布流</div>',
					'<div class="tc bggreen'+r+' h300 mt10">瀑布流</div>',
					'<div class="tc bggreen'+r+' h400 mt10">瀑布流</div>',
					'<div class="tc bggreen'+r+' h500 mt10">瀑布流</div>'
				],wf=$('#waterFall'),cont=wf.find('.Cont'),rad=Math.floor(Math.random()*c.length),m=[],n=0;
				cont.each(function(){
					m.push($(this).height());
				})
				cont.each(function(i){
					if($(this).height()==m.min()) n=i;
				})
				cont.eq(n).append(c[rad]);
				return this;
			}
			function autoAdd(){
				addWater().addWater().addWater().addWater().addWater().addWater();
			}
			$(function(){
				$(document).scroll(function(event) {
					if($(this).scrollTop()+$(window).height()>$(this).height()-100) addWater();
					if($(this).scrollTop()+$(window).height()==$(this).height()) autoAdd();
				});
			})
		</script>
		<div class="row mt5" id="waterFall">
			<div class="span4 Cont">
				<div class="tc bggreen5 h200 mt10">瀑布流</div>
				<div class="tc bggreen2 h300 mt10">瀑布流</div>
				<div class="tc bggreen1 h100 mt10">瀑布流</div>
			</div>
			<div class="span4 Cont">
				<div class="tc bggreen5 h100 mt10">瀑布流</div>
				<div class="tc bggreen4 h100 mt10">瀑布流</div>
				<div class="tc bggreen1 h300 mt10">瀑布流</div>
				<div class="tc bggreen h50 mt10">瀑布流</div>
			</div>
			<div class="span4 Cont">
				<div class="tc bggreen5 h50 mt10">瀑布流</div>
				<div class="tc bggreen2 h300 mt10">瀑布流</div>
				<div class="tc bggreen1 h100 mt10">瀑布流</div>
				<div class="tc bggreen4 h200 mt10">瀑布流</div>
				<div class="tc bggreen3 h50 mt10">瀑布流</div>
				<div class="tc bggreen5 h100 mt10">瀑布流</div>
			</div>
		</div>
	</div>








<div class="Fixed cp abs w30 bggray white p5 tc f12 fm fixed b10 r10 dn"><i class="icon-arrow-up icon-large mr10 f22"></i> 顶部</div>










</body>
</html>